<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
</head>
<body style="margin-left: 30px">
<div id="addRole" class="demo-transfer"></div>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script>
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;

        //获取全部角色信息
        var data1 = ${listRole};
        //获取已拥有角色编号
        var userHaveRole = ${userHaveRole};
            /*[
            {"value": "1", "title": "李白"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅", "disabled": true}
            ,{"value": "6", "title": "巴金"}
            ,{"value": "7", "title": "冰心"}
            ,{"value": "8", "title": "矛盾"}
            ,{"value": "9", "title": "贤心"}
        ]*/


        //穿梭时的回调
        transfer.render({
            elem: '#addRole'
            ,data: data1
            ,title:['未拥有','已拥有']
            ,showSearch:true
            ,value:userHaveRole
            ,onchange: function(obj, index){
                var listRole = [];
                for (let i=0;i<obj.length;i++){

                    listRole[i]=obj[i].value;

                }
                console.log(listRole);
              if (index===0){
                  //往右边
                  //发送异步请求获取右边的权限,在关系表里面对有的权限添加
                  $.post('empDuties/addempRole',{listRole:listRole,eId:"${eId}"},function (obj){
                        if (obj.success){
                            layui.layer.alert("添加成功！", { title: "成功", icon: 1, anim: 5,offset:100,btnAlign: 'c'});
                        }
                  });
              }else {
                  //往左边
                  //发送异步请求获取左边的权限,在关系表里进行权限删除
                  $.post('empDuties/deleteEmpRole',{listRole:listRole,eId:"${eId}"},function (obj){
                      if (obj.success){
                          layui.layer.alert("移除成功！", { title: "成功", icon: 1, anim: 5,offset:100,btnAlign: 'c'});
                      }
                  });





              }
            }
        })



    });
</script>
</body>
</html>